<template>
    <el-card class="!border-none" shadow="never">
        <el-alert :closable="false" show-icon>
            <template #title>
                <div>1、秒结：指用户取货后，团长的订单佣金立即结算。</div>
                <div>2、周结：指设定的时间内，结算上一个自然周以前的订单佣金。</div>
                <div>3、月结：指设定的时间内，结算上一个自然月以前的订单佣金。</div>
            </template>
        </el-alert>
    </el-card>
    <el-card class="!border-none mt-[15px]" shadow="never">
        <div class="font-medium mb-7">结算设置</div>
        <el-form ref="formRef" :model="formData" label-width="150px">
            <el-form-item label="佣金计算方式">
                <div>
                    <el-radio-group v-model="formData.commission_count">
                        <el-radio :label="1">商品实际支付金额</el-radio>
                    </el-radio-group>

                    <div class="form-tips">根据商品实际给付金额和佣金规格计算佣金</div>
                </div>
            </el-form-item>
            <el-form-item label="订单结算周期">
                <div>
                    <div>
                        <el-radio-group v-model="formData.order_settlement">
                            <el-radio :label="1">秒结</el-radio>
                            <el-radio :label="2">周结</el-radio>
                            <el-radio :label="3">月结</el-radio>
                        </el-radio-group>
                    </div>
                    <div v-if="formData.order_settlement === 2">
                        <el-select v-model="formData.order_settlement_value" placeholder="请选择">
                            <el-option label="周一" :value="1" />
                            <el-option label="周二" :value="2" />
                            <el-option label="周三" :value="3" />
                            <el-option label="周四" :value="4" />
                            <el-option label="周五" :value="5" />
                            <el-option label="周六" :value="6" />
                            <el-option label="周日" :value="7" />
                        </el-select>
                    </div>
                    <div v-if="formData.order_settlement === 3">
                        <el-select v-model="formData.order_settlement_value" placeholder="请选择">
                            <el-option
                                v-for="(item, index) in 28"
                                :value="item"
                                :key="index"
                                :label="`${item}号`"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
    <footer-btns>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
    </footer-btns>
</template>
<script setup lang="ts">
import { SettlementSettings, getSettlement } from '@/api/setting/deal'
const formData = reactive({
    commission_count: 1,
    order_settlement: 1,
    order_settlement_value: 1
})
const handleSubmit = async () => {
    try {
        await SettlementSettings(formData)
        getData()
    } catch (error) {
        console.log('保存=>', error)
    }
}
const getData = async () => {
    try {
        const data = await getSettlement()
        for (const key in formData) {
            //@ts-ignore
            formData[key] = data[key]
        }
    } catch (error) {
        console.log('获取=>', error)
    }
}
getData()
</script>
<style scoped lang="scss">
.el-alert--info {
    color: rgba(64, 115, 250, 1);
    background-color: rgba(246, 248, 255, 1);
}
</style>
